<!--这个文件是想做一个好看的上传文件页面，可是还没做好，后面会继续做的-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel上传</title>

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../Static/easyUpload/easy_upload.min.css">
    <script src="../../Static/easyUpload/easyUpload.min.js"></script>
</head>

<body>
<a href="/index.html">返回地图页面</a><br>
<div class="container">
    <h2>Excel表格数据入库</h2>
    <hr>
    <div class="alert alert-warning" role="alert">
        <h5 class="alert-heading">
            请务必使用正确的模板上传
            <button onclick="window.location.href = 'http://data.anonyeast.top/%28%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6%29%E6%95%B0%E6%8D%AE-%E5%9B%9B%E5%B7%9D%E5%9C%9F%E7%B3%BB.xlsx'"
                    class="btn btn-primary float-right">下载模板
            </button>
        </h5>
        <hr>
        当Excel的列名、列的数量、表格的顺序等条件与模板不一致时，将导致数据无法保存到远程数据库。
    </div>
    <div class="alert alert-danger" role="alert">
        <p>在Excel上传完成后，会先清除远程数据库的原有数据，然后再读取Excel的数据并重新存入远程数据库。</p>
        此操作暂时无法回滚，若上传了存在问题的Excel表格将导致原有数据库数据丢失
    </div>
    <!--文件上传组件-->
    <div id="upload" class="easy-upload shadow-sm p-3 mb-5 bg-white rounded" style="margin-top: 30px;"></div>
    <div id="msg">

    </div>
</div>

<script>
    easyUpload({
        easyId: 'upload',
        action: '/upload',
        accept: '.xls,.xlsx',
        maxCount: 1, //插件单次添加文件的最大数量，Number类型
        maxSize: 3, //允许上传文件的最大体积，单位M，Number类型
        multiple: false, //是否开启多文件上传，Boolean类型
        messageTime: 2000, //messageBox消息提示毫秒数，Number类型
        responseType: 'text', //xhr的responseType格式，String类型
        showSize: true, //是否展示文件体积，Boolean类型
        showLoading: true, //是否展示上传loading动画，Boolean类型
        statusText: {  //不同状态展示的提示文字，key为对应文件状态(不可修改)，value为展示文字
            0: '允许上传', //文件大小验证合格后的初始状态
            1: '即将上传', //等待上传队列执行到自己时的状态
            2: '0%',      //上传时刚发出xhr还没响应时的状态
            3: '上传成功',  //xhr响应&上传成功时的状态
            4: '上传失败',  //xhr响应&上传失败时的状态
            5: '体积超出',  //检测文件大小超出限定值时的状态
        },
        statusTextColor: {  //不同状态'提示文字'标签的className，key为对应文件状态(不可修改)，value为标签的className
            0: 'normalcolor',  //正常状态字体色的className
            1: 'normalcolor',  //正常状态字体色的className
            2: 'normalcolor',  //正常状态字体色的className
            3: 'normalcolor',  //正常状态字体色的className
            4: 'failedcolor',  //失败状态字体色的className
            5: 'warncolor',    //警告状态字体色的className
        },
        statusBg: {  //不同状态对应标签的className，key为对应文件状态(不可修改)，value为标签的className
            0: 'normalbg',  //正常状态背景色的className
            1: 'normalbg',  //正常状态背景色的className
            2: 'normalbg',  //正常状态背景色的className
            3: 'normalbg',  //正常状态背景色的className
            4: 'failedbg',  //失败状态背景色的className
            5: 'warnbg',    //警告状态背景色的className
        },
        setRequestHeader: function (xhr) {
            // xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        },
        buildSendData: function (file) {
            var formData = new FormData(); // 发送格式为formData时
            formData.append("file", file.file);
            return formData;
        },
        checkSuccessCode: function (xhr) {
            console.log(xhr);
            if (xhr.responseText == "success") { //这里判断仅仅用于测试，具体看项目
                var html = "<h4 class=\"alert-heading\">操作成功！\n" +
                    "            <button onclick=\"window.location.href = '/index.html'\" class=\"btn btn-success float-right\">返回地图页面</button>\n" +
                    "        </h4>\n" +
                    "        <p>恭喜！数据已经全部保存到远程数据库。</p>\n" +
                    "        <hr>\n" +
                    "        <p class=\"mb-0\">现在，你可以返回地图页面查看效果</p>";
                $("#msg").removeClass();
                $("#msg").addClass("alert alert-success");
                $("#msg").attr({role:"alert"});
                $("#msg").html(html);
                return true;
            } else {
                var html = "<h4 class=\"alert-heading\">操作失败！</h4>\n" +
                    "        <p>很抱歉，数据入库发生异常，请确认使用了正确的模板上传。</p>\n" +
                    "        <hr>\n" +
                    "        <p class=\"mb-0\">具体的异常信息如下(仅供参考)：</p>" +
                    "        <span id=\"errorInfo\"></span>"
                $("#msg").removeClass();
                $("#msg").addClass("alert alert-secondary");
                $("#msg").attr({role:"alert"});
                $("#msg").html(html);
                $("#errorInfo").html(xhr.responseText);
                return false;
            }
        }
    });
</script>


</body>
</html>